<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据大屏</title>
    <link rel="shortcut icon" href="../../assets/ico/favicon32.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../lib/jquery-ui/jquery-ui.css">
    <link rel="stylesheet" href="../../lib/jquery-ui/style.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../lib/jsoneditor/jsoneditor.min.css">
    <link rel="stylesheet" href="../../common/common.css">
    <link rel="stylesheet" href="../../common/app.css">

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin lyiS">
    <div class="layui-header index-header">
        <div class="layui-logo"><img src="../../assets/img/back.png" alt=""></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right">
            <!--<li class="layui-nav-item help">
                <a href="javascript:">
                    <img src="../../assets/img/help.png" class="layui-nav-img">
                    <p>帮助</p>
                </a>

            </li>
            <li class="layui-nav-item errop">
                <a href="javascript:">
                    <img src="../../assets/img/yichang.png" class="layui-nav-img">
                    <p>异常</p>
                </a>
            </li>-->
            <li class="layui-nav-item Save">
                <a href="javascript:">
                    <img src="./../../assets/img/save.png" class="layui-nav-img save">
                    <p>保存</p>
                </a>
            </li>
            <li class="layui-nav-item fabu-open">
                <a href="javascript:">
                    <img src="./../../assets/img/fabu.png" class="layui-nav-img save">
                    <p>发布</p>
                </a>
            </li>
            <li class="layui-nav-item yulan-bar">
                <a href="javascript:">
                    <img src="./../../assets/img/yulan.png" class="layui-nav-img yulan">
                    <p>预览</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black" id="div5">
        <div class="Child-top" id="moduleData">
            <div class="ChildT-left togge" show-tag="module"><img src="../../assets/img/lianjie.png" alt=""></div>
            <div class="ChildT-top">组件</div>
            <div class="ChildT-right Child-right delModule"><img src="../../assets/img/de.png" alt=""></div>
        </div>

    </div>
    <div class="layui-side layui-bg-black" id="div4">
        <div class="Child-top">
            <div class="ChildT-left togge" show-tag="panel"><img src="../../assets/img/lianjie.png" alt=""></div>
            <div class="ChildT-top">大屏</div>
            <div class="ChildT-right"><i class="iconfont insertPanel">&#xe602;</i></div>
        </div>
        <div class="SJT-ss qieh">
            <input type="text" class="suos" placeholder="搜索">
            <i class="iconfont ic">&#xe618;</i>
        </div>
        <div class="LEFT"><img src="../../assets/img/left.png" alt=""></div>
    </div>

    <div class="layui-body">
        <div id="container"></div>
        <!-- 内容主体区域 -->
        <div class="LEFT">
            <img src="../../assets/img/left.png" alt="" class="LEFT-img2">
            <img src="../../assets/img/right.png" alt="" class="LEFT-img1">
        </div>
        <div class="RIGHT">
            <img src="../../assets/img/left.png" alt="" class="RIGHT-img1">
            <img src="../../assets/img/right.png" alt="" class="RIGHT-img2">
        </div>
    </div>


    <div class="layui-right layui-bg-black" id="div1">

        <div class="Child_top">
            <div class="ChildT-top">大屏设置</div>
            <div class="ChildT-bj ">
                <span>背景类型</span>
                <div class="layui-row layui-tab">
                    <ul class="layui-tab-title">
                        <li>
                            <label><input type="radio" name="color" value="0"><span>背景图</span> </label>
                        </li>
                        <li>
                            <label><input type="radio" name="color" value="1"><span>背景色</span>
                            </label>
                        </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item BJ show">
                            <div class="ChildT-pic">
                                <span>背景图片</span>
                                <div class="ChildTp-file">
                                    <input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)"
                                           upload-type="0" accept="image/*"/>
                                    <img src="../../assets/img/pic.png" class="img-circle img-thumbnail img-responsive"
                                         id="avarimgs"/>
                                    <p>点击或拖拽文件至这里</p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item BJ layui-show">
                            <div class="layui-fluid">
                                <div class="layui-row">
                                    <div class="layui-col-md4">背景颜色</div>
                                    <div class="layui-col-md3">
                                        <div id="mycolor" class="mycolor"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
        <div class="Child_cont">
            <div class="ChildC_top">
                <span>缩放类型</span>
                <div class="ChildC-radio">
                    <label><input type="radio" name="pu" value="0"><span>等比缩放宽度铺满</span></label>
                    <label><input type="radio" name="pu" value="1"><span>等比缩放高度铺满</span></label>
                    <label><input type="radio" name="pu" value="2"><span>全屏铺满</span></label>
                    <label><input type="radio" name="pu" value="3"><span>原始像素</span></label>
                </div>
            </div>
            <div class="ChildC-px">
                <div class="ChildC-left">
                    <img src="../../assets/img/help1.png" alt="">
                    <span>设置像素</span>
                </div>
                <div class="ChildC-right">
                    <div class="ChildCR-ko"><input type="text" class="Mwidth" name="p-width"></div>
                    <div class="ChlidCR-x">X</div>
                    <div class="ChildCR-ko"><input type="text" class="Mheight" name="p-height"></div>
                </div>
            </div>

        </div>
        <div class="Child_foot ChildT-bj">
            <div class="ChildC-left">
                <img src="../../assets/img/help1.png" alt="">
                <span>封面设置</span>
            </div>
            <div class="layui-tab">
                <ul class="ChildC-radio layui-tab-title">
                    <li>
                        <label><input
                                type="radio"
                                name="zhi"
                                value="0"><span>自动截图</span></label>
                    </li>
                    <li>
                        <label><input
                                type="radio"
                                name="zhi"
                                value="1"><span>手动上传</span></label>
                    </li>


                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item BJ layui-show" style="text-align:center;">
                        *大屏封面自动刷新
                    </div>
                    <div class="layui-tab-item BJ">
                        <div class="ChildT-pic">
                            <span>封面图片</span>
                            <div class="ChildTp-file">
                                <input type="file"
                                       name="pclogo"
                                       id="CoverImg"
                                       onchange="xmTanUploadImg(this)"
                                       upload-type="1"
                                       accept="image/*"/>
                                <img src="../../assets/img/cover.png"
                                     class="img-circle img-thumbnail img-responsive"
                                     id="CoverPng"/>
                                <p>
                                    点击或拖拽文件至这里</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-right layui-bg-black" id="div2">
        <div class="ChildT-top">组件设置</div>
        <div class="layui-tab layui-tab-card Child2-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">样式</li>
                <li>数据</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-collapse tab-item" lay-filter="test">
                        <div class="Menv Cchange" id="Menv">

                        </div>
                        <div class="Menvtilte" style="text-align: center;font-size: larger;">
                            请选择一个组件进行设置
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-fluid" style="padding: 10px;">
                        <div class="layui-row">
                            <div class="layui-col-md4">选择数据源</div>
                            <div class="layui-col-md8 datasource-list">
                                <button data-tag='default' class="check">静态数据</button>
                                <button data-tag='api'>数据API</button>
                                <button data-tag='database'>数据库</button>
                                <p id="edit-datasource">编辑数据源</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="layui-right layui-bg-black" id="div3">
        <div class="ChildT-top">大屏设置</div>
        <div class="ChlidT-kon">请先选择一个大屏</div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div class="footer—info">
            <div class="layui-inline">
                <label class="layui-form-label">大屏名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="panel_name" class="layui-input"/>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fabu">
    <div class="fabu-cont">
        <div class="fabu-title">
            <span>发布</span>
            <i class="iconfont fabu-close">&#xe714;</i>
        </div>
        <form class="layui-form">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">链接：</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="fabu-textarea" readonly></textarea>
                </div>
            </div>
            <div class="layui-form-item fabu-yzm fabu-navs">
                <label class="layui-form-label">校验码：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-filter="FB-BTN" lay-skin="switch">
                    <i class="layui-icon layui-icon-password" style="font-size: 14px;"></i>
                    <input type="text" placeholder="请输入校验码" value="data_view" class="layui-input" id="fabu-yzm"
                           disabled>
                </div>
            </div>
            <div class="layui-form-item fabu-yzm">
                <label class="layui-form-label">过期时间：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-filter="FB-BTN" lay-skin="switch">
                    <input type="text" placeholder="" data-value="-1" readonly class="layui-input" id="fabu-data"
                           disabled>
                </div>
            </div>
            <div class="layui-form-item fabu-new">
                <label class="layui-form-label">自动刷新：</label>
                <div class="layui-input-block">
                    <input type="text" value="30" class="layui-input" onkeyup="value=value.replace(/[^\d]/g,'')"
                           id="fabu-repeat">
                    <span>分钟</span>
                </div>
            </div>
            <div class="fabu-nav">
                <i class="iconfont">&#xe63f;</i>
                <span>共享大屏以后和数据接口都可以在不登录的情况下访问，如果不想公开大屏请使用 <a href="#">预览</a></span>
            </div>
        </form>
        <div class="fabu-foot">
            <button class="btn-primary fabu-sucess">确定</button>
            <button class="btn fabu-close">关闭</button>
        </div>
    </div>
</div>
<div class="dataMenu">
    <div class="dataMenuCont">
        <div class="dataMenu-title">
            <span>编辑数据源</span>
            <i class="iconfont dataClose">&#xe714;</i>
        </div>
        <div class="dataMenu-nav">
            <div class="layui-tab layui-tab-brief"
                 lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">静态数据</li>
                    <li>数据API</li>
                    <li>数据库</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show"
                         data-tag="default">
                        <div class="dataMenu-input">
                            <input type="text" readonly>
                            <button class="btn-primary">
                                获取数据
                            </button>
                        </div>
                        <div class="jsoneditor"
                             id="jsoneditor_default"></div>
                    </div>
                    <div class="layui-tab-item"
                         data-tag="api">
                        <div class="dataMenu-input">
                            <input type="text" placeholder="请输入api访问url">
                            <button class="btn-primary postModuleData">
                                获取数据
                            </button>
                        </div>
                        <div class="jsoneditor"
                             id="jsoneditor_api"></div>
                    </div>
                    <div class="layui-tab-item"
                         data-tag="database">
                        <div class="dataMenu-input">
                            <input type="text" placeholder="请输入数据库url|username|password|sql语句">
                            <button class="btn-primary postDatabase">
                                获取数据
                            </button>
                        </div>
                        <div class="jsoneditor"
                             id="jsoneditor_database"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dataMenu-foot">
            <button class="btn-primary data-confirm">确定</button>
            <button class="btn dataClose">取消</button>
        </div>
    </div>
</div>
</body>

<script src="../../lib/jquery/jquery-3.0.0.min.js"></script>
<script src="../../lib/layui/layui.js"></script>
<script src="../../lib/jquery-ui/jquery-ui.js"></script>
<script src="../../lib/echarts/echarts.min.js"></script>
<script src="../../lib/dom-to-image/dom-to-image.min.js"></script>
<script src="../../lib/jsoneditor/jsoneditor.min.js"></script>
<script src="../../common/panel-data.js"></script>
<script src="../../common/common.js"></script>
<script src="./tuceng.js"></script>

</html>
